<template>
	<view class="container">
		<view class="addr-wrap">
			<view class="addr-list">
				<view class="addr-item" v-for="item in useDataResult.dataList">
					<view class="info">
						<!-- <view class="tag">{{ item.tag }}</view> -->
						<view v-if="item.isDefault === 0" class="tag">默</view>
						<view v-else class="tag">其他</view>
						<view class="text">
							<view class="name-phone">
								<view>{{ item.contactName }}</view>
								<view></view>
								<view>{{ item.contactPhone }}</view>
							</view>
							<view class="addr">
								{{ item.provinceName+' '+item.cityName+' '+item.areaName+' '+item.address }}
							</view>
						</view>
					</view>
					<view class="edit">
						<view class="left">
							<image v-if="item.isDefault" class="check" src="@/static/new/user/check.png" @tap="defaultChange(item)"></image>
							<image v-else class="checked" src="@/static/new/user/checked.png" @tap="defaultChange(item)"></image>
							<!-- <radio :checked="!item.isDefault" color="#2fd098" style="transform:scale(0.8)" @change="radioChange"/> -->
							<text>默认地址</text>
						</view>
						<view class="right">
							<view @tap="addressEdit(item)">编辑地址</view>
							<view @tap="del(item.fansAddressId)">删除地址</view>
						</view>
					</view>
				</view>
			</view>

			<view class="addr-add" @click="addrAdd">
				<image src="@/static/new/plus.png" />
				<text>新增地址</text>
			</view>
		</view>

		<!-- 新增地址弹窗 -->
		<uni-popup ref="popupRef" type="bottom" background-color="#fff">
			<view class="popup-wrap">
				<view class="title">
					<image src="@/static/new/user/icon-title.png" />
					<text>新建地址</text>
					<image src="@/static/new/user/icon-title.png" />
				</view>

				<view class="form-list">
					<view class="form-item">
						<view class="left">
							收货人
						</view>
						<view class="right">
							<input type="text" placeholder="请输入收货人姓名" v-model="data.saveObject.contactName">
						</view>
					</view>
					<view class="form-item">
						<view class="left">
							手机号
						</view>
						<view class="right">
							<input type="phone" placeholder="请输入手机号" v-model="data.saveObject.contactPhone">
						</view>
					</view>
					<view class="form-item">
						<view class="left">
							所在地区
						</view>
						<view class="right">
							<uni-data-picker :localdata="address" v-model="data.saveObject.areaCode" :value="data.saveObject.areaCode" @change="dataPickerChange($event, 'areaCode')" v-slot:default="{data, error, options}">
								<view style="display: flex;align-items: center;justify-content: space-between;">
									<text v-if="data.length != 0">{{ dataPicker(data) }}</text>
									<text v-else style="font-size: 30rpx;color: #bbb;">选择省市区街道</text>
									<image style="width: 36rpx;height: 36rpx;" src="@/static/new/user/icon-location.png" />
								</view>
							</uni-data-picker>
						</view>
					</view>
					<view class="form-item">
						<view class="left">
							详细地址
						</view>
						<view class="right">
							<input type="phone" placeholder="街道、小区、写字楼、门牌" v-model="data.saveObject.address">
						</view>
					</view>
					<!-- <view class="form-item">
						<view class="left">
							地址标签
						</view>
						<view class="right" style="border-bottom: none;">
							<view class="list">
								<view class="tags" v-for="item in data.tags" :class="{ 'is-select': item.isSelect === 1 }" @tap="tagSelect(item)">
									{{ item.text }}
								</view>
							</view>
						</view>
					</view> -->
					<view class="form-item" style="align-items: center;justify-content: space-between;">
						<view class="left" style="width: 35%;">
							设置为默认地址
						</view>
						<switch :checked="!data.saveObject.isDefault" @change="switchChange" color="#24c789" style="transform:scale(0.8)" />
					</view>
					<view class="form-btn">
						<view @tap="popupClose">返回</view>
						<view @tap="saveAddress">保存</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<view class="list-tip-text" v-if="useDataResult.dataList.length != 0">{{useDataResult.listTipText}}</view>
		<gzListNull :list="useDataResult.dataList"></gzListNull>
	</view>
</template>

<script setup>
	import storageManage from '@/util/storageManage.js'
	import address from '@/components/applyJson/address.json' // 地址
	import { reactive, ref, getCurrentInstance } from 'vue';
	import gzConfirm from '@/components/gzConfirm/gzConfirm.vue'
	import { $addressList, $addressAdd, $addressUpdate, $addressDel } from '@/http/apiManager.js'
	import useGetList from '@/hooks/useGetList.js'
	import gzListNull from '@/components/gzListNull/gzListNull.vue'; //空数据组件

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const popupRef = ref()
	let pickerdata = ref('')
	const data = reactive({
		isAdd: true, // 新增OR修改
		saveObject: {}, // 数据
		tags: [
			{ text: '家', isSelect: 1 },
			{ text: '公司', isSelect: 0 },
			{ text: '学校', isSelect: 0 },
			{ text: '父母', isSelect: 0 },
		]
	})
	const { useDataResult, getList } = useGetList($addressList, data => data, {}, true)

	// 修改地址默认
	function defaultChange(item) {
		// console.log(item);
	}

	/**
	 * 删除地址
	 */
	function del(fansAddressId) {
		uni.showModal({
			title: '确定删除？',
			content: '确定删除该地址？',
			success({ cancel }) {
				if (cancel) return
				uni.showLoading({ title: '删除中...' })
				$addressDel({ fansAddressId }).then(res => {
					uni.hideLoading()
					$infoBox.successToast('删除成功')
					getList()
				})
			}
		})
	}
	// 打开新增地址弹窗
	function addrAdd() {
		// 新增OR编辑
		data.isAdd = true
		popupRef.value.open()
		data.saveObject = { // 初始化数据
			areaCode: [],
			areaName: [],
			isDefault: 0
		}
	}
	// datapicker组件，选择完毕后的回调，地址要省市县三个码的地址
	const dataPickerChange = async (e, name) => {
		// console.log('eeeeeeeeeee', e);
		// console.log('nameeeeeeeeeeeee', name);
		// 处理上传数据
		data.saveObject.provinceCode = e.detail.value[0].value // 省编码
		data.saveObject.provinceName = e.detail.value[0].text // 省名称
		data.saveObject.cityCode = e.detail.value[1].value // 省编码
		data.saveObject.cityName = e.detail.value[1].text // 省名称
		data.saveObject.areaCoe = e.detail.value[2].value // 省编码
		data.saveObject.areaName = e.detail.value[2].text // 省名称
		data[name] = []
		let cityInfo = []
		e.detail.value.forEach(item => {
			data[name].push(item.value) // 地址码赋值
			cityInfo.push(item.text);
		})
		data.areaName = cityInfo
		// console.log(data.areaCode, cityInfo, "data.areaCode")
	}
	// data-pciker 回显处理函数
	const dataPicker = (data) => {

		let result = ''
		data.forEach(item => result += (item.text + '/'))
		result = result.substr(0, result.length - 1) // 截取掉最后一个斜杠
		pickerdata.value = result

		return result
	}
	// 选择地址标签
	function tagSelect(item) {
		data.tags.forEach(tag => {
			if (tag.isSelect === 1) {
				tag.isSelect = 0
			}
		})
		item.isSelect = 1
	}
	const switchChange = (e) => {
		switch (e.detail.value) {
			case false:
				data.saveObject.isDefault = 1
				break;
			case true:
				data.saveObject.isDefault = 0
				break;
			default:
				break;
		}
	}
	// 关闭弹窗页面
	function popupClose() {
		popupRef.value.close()
	}
	// 保存地址
	function saveAddress() {
		if (data.isAdd) {
			$addressAdd({ ...data.saveObject }).then(res => {
				$infoBox.successToast("地址新增成功", { duration: 2000 })
				setTimeout(() => {
					popupRef.value.close()
					getList()
				}, 2000)
			})
		} else {
			$addressUpdate({ ...data.saveObject }).then(res => {
				$infoBox.successToast("地址修改成功", { duration: 2000 })
				setTimeout(() => {
					popupRef.value.close()
					getList()
				}, 2000)
			})
		}


	}
	// 修改地址
	function addressEdit(item) {
		data.isAdd = false
		data.saveObject = JSON.parse(JSON.stringify(item))
		data.saveObject.areaCode = data.saveObject.areaCoe.toString()
		popupRef.value.open()
	}
</script>
<style>
	page {
		background: #fafbfc;
	}
</style>
<style lang="less">
	.container {
		width: 100%;
		box-sizing: border-box;
		min-height: 100vh;
		background: #F7F8FB;
		padding: 24rpx 32rpx;
		overflow: hidden;

		.addr-wrap {
			position: relative;

			.addr-list {
				display: flex;
				flex-direction: column;
				gap: 24rpx;

				.addr-item {
					background-color: #fff;
					border-radius: 24rpx;
					padding: 30rpx;

					.info {
						display: flex;
						gap: 24rpx;
						padding-bottom: 40rpx;
						border-bottom: 1rpx solid #E6E6E6;

						.tag {
							width: 84rpx;
							height: 84rpx;
							background: linear-gradient(270deg, #24C789 0%, #4AE5BE 100%);
							font-weight: 600;
							font-size: 28rpx;
							color: #FFFFFF;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-shrink: 0;
						}

						.text {
							.name-phone {
								display: flex;
								align-items: center;
								font-weight: 600;
								font-size: 30rpx;
								color: #333333;

								view {
									&:nth-child(2) {
										width: 4rpx;
										height: 30rpx;
										background: #000;
										margin: 0 24rpx;
									}
								}
							}

							.addr {
								margin-top: 28rpx;
								font-weight: 400;
								font-size: 26rpx;
								color: #999999;
							}
						}
					}

					.edit {
						margin-top: 18rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							display: flex;
							align-items: center;
							gap: 16rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}

							text {
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}
						}

						.right {
							display: flex;
							gap: 24rpx;

							view {
								width: 160rpx;
								height: 56rpx;
								line-height: 56rpx;
								border-radius: 34rpx;
								border: 1rpx solid #B4B4B4;
								text-align: center;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}
						}
					}
				}
			}

			.addr-add {
				position: fixed;
				bottom: 40rpx;
				background: #24c789;
				border-radius: 55rpx;

				padding: 34rpx 0;
				box-sizing: border-box;
				width: calc(100% - 64rpx);
				text-align: center;

				image {
					width: 28rpx;
					height: 28rpx;
					vertical-align: -4rpx;
				}

				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
				}

			}
		}

		.popup-wrap {
			padding: 40rpx 50rpx 40rpx 40rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0 0;
			background: #fff;

			.title {
				display: flex;
				gap: 28rpx;
				align-items: center;
				justify-content: center;
				margin-bottom: 78rpx;

				image {
					width: 34rpx;
					height: 20rpx;
				}

				text {
					font-weight: 600;
					font-size: 40rpx;
					color: #333333;
				}
			}

			.form-list {
				display: flex;
				flex-direction: column;
				gap: 44rpx;

				.form-item {
					display: flex;

					.left {
						width: 28%;
						font-weight: 400;
						font-size: 30rpx;
						color: #555555;
					}

					.right {
						width: 72%;
						padding-bottom: 34rpx;
						border-bottom: 2rpx solid #E6E6E6;

						.list {
							display: flex;
							gap: 24rpx;


							.tags {
								width: 84rpx;
								height: 84rpx;
								background: linear-gradient(270deg, #24C789 0%, #4AE5BE 100%);
								border-radius: 50%;
								flex-shrink: 0;
								color: #fff;
								line-height: 84rpx;
								text-align: center;
								font-size: 28rpx;
								// font-weight: 600;
							}

							.is-select {
								position: relative;

								&::after {
									content: '';
									display: block;
									width: 32rpx;
									height: 32rpx;
									position: absolute;
									top: -5rpx;
									right: -12rpx;
									background-image: url('../../static/new/user/icon-checked.png');
									background-repeat: no-repeat;
									background-size: 100% 100%;
									background-position: 0 0;
								}
							}
						}

						.input-placeholder {
							font-weight: 400;
							font-size: 30rpx;
							color: #BBBBBB;
						}
					}
				}

				.form-btn {
					margin-top: 56rpx;
					display: flex;
					gap: 32rpx;
					width: 100%;

					view {
						padding: 34rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;

						&:nth-child(1) {
							flex: 1;
							background: #F5F5F5;
							border-radius: 65rpx;
						}

						&:nth-child(2) {
							flex: 2;
							background: #24C789;
							border-radius: 65rpx;
							color: #fff;
						}
					}
				}
			}

		}
	}
</style>